<template>
  <ContainerContent
    header-class="border-b-1px border-b-dashed border-color-#DFE2E5 pb-6"
    :refresh="false"
    :pagination="false"
    inner>
    <template #header>
      <div class="deploy-title">
        规则名称 <span class="sub-title">{{ title }}</span>
      </div>
    </template>
    <section class="flex flex-col" :loading="loading">
      <deploy-tree
        v-model:target="targetValue"
        :data="originTreeData"
        class="mb-6" />
      <div class="!w-full" v-if="originTreeData.length">
        <a-button type="primary" @click="handleSubmit" :loading="saveLoading"
          >保存配置</a-button
        >
      </div>
    </section>
  </ContainerContent>
</template>
<script lang="ts" setup>
import type { WafBindNodeIds } from '@/apis/model/waf'
import { getApiNodeTreeWithRegionApi } from '@/apis/modules/node/node'
import {
  getApiWafBindNodeListApi,
  updateApiWafBindApi
} from '@/apis/modules/waf'
import ContainerContent from '@/components/ContentContainer.vue'
import DeployTree from './DeployTree.vue'
const route = useRoute()
const id = ref(route.params.id)
const originTreeData = ref([])

const title = ref(route.params.name || '')
const targetValue = ref([])
const { run, loading } = useListRequest(getApiNodeTreeWithRegionApi, {
  afterFn(res) {
    originTreeData.value = transformToTree(res?.list || [])
  }
})
useRequest(getApiWafBindNodeListApi, {
  auto: true,
  params: { id: id.value },
  success(res: WafBindNodeIds) {
    targetValue.value = res.node_ids || []
    run()
  }
})
const saveLoading = ref(false)
const handleSubmit = async () => {
  saveLoading.value = true
  await updateApiWafBindApi({
    id: id.value as string,
    node_ids: targetValue.value
  })
  ToastUtils.success('操作成功')
  run()
  saveLoading.value = false
}
</script>

<style lang="less" scoped>
.deploy-title {
  @apply text-sm/22px text-4;
  .sub-title {
    @apply text-2 ml-4;
  }
}
</style>
